<template>
  <div class="detail">
    <product-param v-bind:title="productDetail.subtitle" style="margin-left: 20px"></product-param>
    <div class="wrapper">
      <div class="container clearfix">
        <div class="swiper">
          <swiper :options="swiperOption">
              <swiper-slide><img :src="productDetail.mainImage" alt="" style="width: 268px;height: 524px;margin-left: 25%"></swiper-slide>
              <!--<swiper-slide><img src="/imgs/detail/phone-2.jpg" alt=""></swiper-slide>-->
              <!--<swiper-slide><img src="/imgs/detail/phone-3.jpg" alt=""></swiper-slide>-->
              <!--<swiper-slide><img src="/imgs/detail/phone-4.jpg" alt=""></swiper-slide>-->
              <!-- Optional controls -->
              <!--<div class="swiper-pagination"  slot="pagination"></div>-->
          </swiper>
        </div>
        <div class="content">
          <span class="item-title">{{productDetail.subtitle}}</span>
          <!--<p class="item-info">相机全新升级 / 960帧超慢动作 / 手持超级夜景 / 全球首款双频GPS / 骁龙845处理器 / 红<br/>外人脸解锁 / AI变焦双摄 / 三星 AMOLED 屏</p>-->
          <!--<div class="delivery">小米自营</div>-->
          <div class="item-price">￥{{productDetail.price}}</div><!--<span class="del">1999元</span>-->
          <div class="line"></div>
          <!--<div class="item-addr">-->
            <!--<i class="icon-loc"></i>-->
            <!--<div class="addr">北京 北京市 朝阳区 安定门街道</div>-->
            <!--<div class="stock">有现货</div>-->
          <!--</div> class="item-version clearfix"-->

          <div class="clearfix" style="margin-bottom: 10px" v-for="item in productDetail.attrInners">
            <span style="display: block">{{item.name}}</span>
            <div  :class="{'checked':version==index}" @click="version=index" v-for="(item2,index) in item.values" class="sku1"><span>{{item2}}</span>
            </div>
          </div>

          <div  class="item-total">
              <div >
                <!--<div class="fl">{{productDetail.subtitle}} {{version==1?'6GB+64GB 全网通':'4GB+64GB 移动4G'}} 深灰色</div>-->
                <!--<div class="fr">{{productDetail.price}}元</div>-->
              </div>
              <div class="phone-total" style="clear:both;display: block;margin-top: 10px">总计：{{productDetail.price}}元</div>
          </div>
          <div class="btn-group">
            <a href="javascriptcarts:;" class="btn btn-huge fl" @click="addCart">加入购物车</a>
          </div>

        </div>
      </div>
    </div>
    <div class="price-info">
      <div class="container">
        <h2>价格说明</h2>
        <div class="desc">
          <img src="/imgs/detail/item-price.jpeg" alt="">
        </div>
      </div>
    </div>
    <service-bar></service-bar>
  </div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import ProductParam from './../components/ProductParam'
import ServiceBar from './../components/ServiceBar';
export default{
  name:'detail',
  data(){
    return {
      id:this.$route.params.id,//获取商品ID
      err:'',
      version:1,//商品版本切换
      product:{},//商品信息
      productDetail:{},
      swiperOption:{
        autoplay:true,
        pagination: {
          el: '.swiper-pagination',
          clickable :true,
        }
      }
    }
  },
  components:{
    swiper,
    swiperSlide,
    ProductParam,
    ServiceBar
  },
  mounted(){
    this.getProductInfo();
     let id=this.$route.params.id
      this.axios.get(`/products/`+id).then((res)=>{
          this.productDetail = res;
      })
  },
  methods:{
    getProductInfo(){
      // this.axios.get(`/products/${this.id}`).then((res)=>{
      //   this.product = res;
      // })
    },
    addCart(){
        if(this.$cookie.get("userInfo")==null){
            alert('请先进行登录')
            this.$router.push('/login')
        }
      this.axios.post('/carts',{
         userId:JSON.parse(this.$cookie.get("userInfo")).id,
         productId:this.id,
         quantity:1,
         productName:this.productDetail.subtitle,
        productSubtitle:this.productDetail.subtitle,
        productMainImage:this.productDetail.mainImage,
        productPrice:this.productDetail.price,
        productStatus:null,
        productTotalPrice:this.productDetail.price,
        productStock:null,
        productSelected:true
      }).then(res=>{
          this.$message({
              type:"success",
              message:"success"
          })
        this.$store.dispatch('saveCartCount',11);
        // this.$router.push('/cart');
      });
    }
  }
}
</script>
<style lang="scss">
  @import './../assets/scss/config.scss';
  @import './../assets/scss/mixin.scss';

  .checked{
    border:1px solid #FF6600;
    color:#FF6600;
  }

  .clearfix:after{
    content: "020";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }

  .clearfix {
    /* 触发 hasLayout */
    zoom: 1;
  }

  .sku1{
    border:1px solid rgb(224,224,224);
    margin-top:10px;float:left;margin-right:20px;display: inline-block;
    height:45px;width:270px;text-align: center;line-height: 50px
  }
  .sku{
    border:1px solid rgb(224,224,224);
    margin-left: 20px;float:left;
    height:45px;width:295px;text-align: center;line-height: 50px
  }
    .detail {
      .wrapper {
        .swiper {
          float: left;
          width: 642px;
          height: 617px;
          margin-top: 5px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .content {
          float: right;
          width: 584px;
          height: 870px;
          .item-title {
            font-size: 28px;
            padding-top: 30px;
            padding-bottom: 16px;
            height: 26px;
          }
          .item-info {
            font-size: 14px;
            height: 36px;
          }
          .delivery {
            font-size: 16px;
            color: #FF6700;
            margin-top: 26px;
            margin-bottom: 14px;
            height: 15px;
          }
          .item-price {
            font-size: 20px;
            color: #FF6700;
            height: 19px;
            .del {
              font-size: 16px;
              color: #999999;
              margin-left: 10px;
              text-decoration: line-through;
            }
          }
          .line {
            height: 0;
            margin-top: 25px;
            margin-bottom: 28px;
            border-top: 1px solid #E5E5E5;
          }
          .item-addr {
            height: 108px;
            background-color: #FAFAFA;
            border: 1px solid #E5E5E5;
            box-sizing: border-box;
            padding-top: 31px;
            padding-left: 64px;
            font-size: 14px;
            line-height: 14px;
            position: relative;
            .icon-loc {
              position: absolute;
              top: 27px;
              left: 34px;
              @include bgImg(20px, 20px, '/imgs/detail/icon-loc.png');
            }
            .addr {
              color: #666666;
            }
            .stock {
              margin-top: 15px;
              color: #FF6700;
            }
          }
          .item-version, .item-color {
            margin-top: 30px;
            h2 {
              font-size: 18px;
              margin-bottom: 20px;
            }
          }
          .item-version, .item-color {
            .phone {
              width: 287px;
              height: 50px;
              line-height: 50px;
              font-size: 16px;
              color: #333333;
              border: 1px solid #E5E5E5;
              box-sizing: border-box;
              text-align: center;
              cursor: pointer;
              span {
                color: #666666;
                margin-left: 15px;
              }
              .color {
                display: inline-block;
                width: 14px;
                height: 14px;
                background-color: #666666;
              }
              &.checked {
                border: 1px solid #FF6600;
                color: #FF6600;
              }
            }
          }
          .item-total {
            height: 108px;
            background: #FAFAFA;
            padding: 24px 33px 29px 30px;
            font-size: 14px;
            margin-top: 20px;
            margin-bottom: 10px;
            box-sizing: border-box;
            .phone-total {
              font-size: 24px;
              color: #FF6600;
              margin-top: 18px;
            }
          }
        }
      }
      .price-info {
        background-color: #F3F3F3;
        height: 340px;
        h2 {
          font-size: 24px;
          color: #333333;
          padding-top: 38px;
          margin-bottom: 30px;
        }
      }
    }

</style>